<template>
  <div class="label-list table-theme">
    <head-title title="运营--标签列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <div class="add">
            <el-button type="primary" @click="onOpenDialog('add')"
              >添加标签</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="list" border class="label-table">
        <el-table-column
          label="ID"
          align="center"
          prop="label_id"
          width="80"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="label_name"
        ></el-table-column>
        <el-table-column label="icon" align="center" width="90">
          <template slot-scope="scope">
            <img-popover :src="scope.row.label_icon"></img-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="onOpenDialog('details', scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="onOpenDialog('edit', scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="onDel(scope.row.label_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 添加空间弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="isDialog"
      width="500px"
      center
      :modal-append-to-body="false"
      @close="onClone('labelForm')"
    >
      <el-form
        :model="labelForm"
        :rules="labelFormRules"
        ref="labelForm"
        label-width="100px"
      >
        <el-form-item label="标签icon:" class="upload-box" prop="label_icon">
          <div class="iconImg">
            <el-upload
              class="avatar-uploader"
              ref="upload"
              action="fakeaction"
              :show-file-list="false"
              :http-request=" function (res) { return upload(res); } "
              multipleaccept="image/*"
              v-if="type !== 'details'"
            >
              <img
                v-if="labelForm.label_icon"
                :src="labelForm.label_icon"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <img
                v-else
                :src="labelForm.label_icon"
                class="avatar"
              />
          </div>
        </el-form-item>
        <el-form-item label="名称:" prop="label_name">
          <el-input
            v-model="labelForm.label_name"
            placeholder="请输入标签名称"
            :disabled="type === 'details'"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClone('labelForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit('labelForm')"
          v-if="type !== 'details'"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  name: "label_list",
  components: {
    ImgPopover,
  },
  data() {
    return {
      list: [],
      page: 1,
      type: "add",
      total: 0,
      isDialog: false,
      title: "",
      labelForm: {
        label_name: "",
        label_icon: "",
      },
      labelFormRules: {
        label_name: [
          {
            required: true,
            message: "请输入标签名称",
          },
        ],
        label_icon: [
          {
            required: true,
            message: "请上传标签icon",
          },
        ],
      },
    };
  },
  created() {
    this.init(1);
  },
  methods: {
    // 刷新
    refreshPage() {
      this.page = 1;
      this.init(1);
    },
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: 10,
        store_id: this.store_id,
      };
      this.$http(this.$ApiList.LabelList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    onOpenDialog(type, row) {
      this.type = type;
      switch (type) {
        case "add":
          this.title = "添加标签";
          break;
        case "edit":
        case "details":
          this.title = type === "edit" ? "编辑标签" : "标签详情";
            this.$http(this.$ApiList.LabelInfo, {
              label_id: row.label_id,
            }).then((res) => {
                delete res.datas.add_time
              this.labelForm = res.datas;
            });
          break;
        default:
          break;
      }
      this.isDialog = true;
    },
    // 图标上传
    upload(params) {
      const file = params.file,
        isJPGPNG = file.type === "image/jpeg" || "image/png",
        isLt1MB = file.size / 1024 <= 512;
      if (!isJPGPNG) {
        this.$message.error("只能上传图片格式png、jpg!");
        return;
      }
      if (!isLt1MB) {
        this.$message.error("图片不能大于512KB");
        return;
      }

      let space_image = new FormData();
      space_image.append("file[]", file);
      this.$http(this.$ApiList.publicUpload, space_image).then((res) => {
        this.labelForm.label_icon = res.datas[0];
      });
    },
    // 提交
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.labelForm;
          switch (this.type) {
            case "add":
              delete data.label_id;
              this.$http(this.$ApiList.UpLabel, data).then((res) => {
                this.$message.success(res.datas);
                this.init(1);
                this.isDialog = false;
                this.$refs[formName].resetFields();
              });
              break;
            case "edit":
              this.$http(this.$ApiList.UpdateLabel, data).then((res) => {
                this.$message.success(res.datas);
                this.init(this.page);
                this.isDialog = false;
                this.$refs[formName].resetFields();
              });
              break;
            default:
              break;
          }
        }
      });
    },
    // 删除
    onDel(label_id) {
      this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(this.$ApiList.LabelDel, {label_id}).then((res) => {
            this.$message.success(res.datas);
            this.init(this.page);
          });
        })
        .catch(() => {});
    },
    onClone(formName) {
      this.isDialog = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.label-list {
  
}
</style>